<template>
    <div class="ticketConfirm">
        <div class="logo"><img src="@/assets/images/logoTop.png" alt=""></div>
        <div class="confirm_box">
            <div class="confirm_info">
                <p>姓名:{{ticketInfo.name}}</p>
                <p>电话:{{ticketInfo.phone}}</p>
                <p>身份证号:{{ticketInfo.idcard}}</p>
                <p>家庭地址:{{ticketInfo.home_province}}{{ticketInfo.home_city}}{{ticketInfo.home_address}}</p>
                <p>职业:{{ticketInfo.job}}</p>
                <p>工作单位:{{ticketInfo.workunit}}</p>
                <p>出发城市:{{ticketInfo.start_city}}</p>
                <p>到达城市:{{ticketInfo.end_city}}</p>
                <div>我确认以上信息真实准确</div>
            </div>
            <div class="confirm_btn cf">
                <a href="javascript:void(0);" @click="backModify" class="btn_back f_l btn_style">返回修改</a>
                <a href="javascript:void(0);" @click="ensureSubmit" class="btn_confirm f_r btn_style">确认提交</a>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="t_modal" v-if="showModal">
            <div class="modal_inner">
                <div class="modal_box">
                    <p class="p1">恭喜你<br/>提交成功!</p>
                    <p class="p2">请持续关注公众号,<br/>幸运名单将于近期公布。</p>
                    <a href="javascript:void(0);" @click="submit" class="btn_s">生成海报</a>
                    <p class="p3">将海报保存并转发,<br/>让更多老乡一起回家!</p>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    data(){
        return{
            showModal: false,
            ticketInfo:{}
        }
    },
    mounted(){
        this.getTicketInfoFn();
    },
    methods:{
        ...mapActions({
            saveTicketInfo:'fishH5/saveTicketInfo'
        }),
        getTicketInfoFn(){
            this.ticketInfo = JSON.parse(localStorage.getItem('applyData'));
        },
        ensureSubmit(){
            this.showModal = true;
          this.saveTicketInfo(this.ticketInfo);
        },
        submit(){
            this.ticketInfo.callback=()=>{
                this.showModal = false;
                this.$router.replace({
                    path:'/ticketCouplets'
                })
            }
            this.saveTicketInfo(this.ticketInfo);
        },
        backModify(){
            this.$router.replace({
                path:'/applyNotesForm?isMofiy=true'
            })
        }
    }
}
</script>
<style scoped>
    .ticketConfirm{
        width: 7.5rem;
        min-height: 100vh;
        position: relative;
        padding-top: 1.5rem;
        padding-bottom: .6rem;
        background: url(~@/assets/images/cloud04.png) no-repeat right bottom/6.82rem 2.95rem;
    }
    .ticketConfirm .logo{
        width: 2.86rem;
        height: .86rem;
        position: absolute;
        top: .4rem;
        right: .46rem;
    }
    .ticketConfirm .logo img{
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
    .confirm_box{
        width: 6rem;
        position: relative;
        left: .75rem;
        box-shadow: 0 0 8px rgba(0,0,0,.1);
        border-radius: .2rem;
        padding-top: .4rem;
        background: url(~@/assets/images/logoBot.png) no-repeat center bottom .1rem/3.39rem 1.87rem;
        background-color: #fff;
        padding-bottom: 2.2rem;
    }
    .confirm_info{
        padding-left: 1.02rem;
    }
    .confirm_info p{
        line-height: .64rem;
        font-size: .27rem;
        font-weight: bold;
    }
    .confirm_info>div{
        font-size: .32rem;
        color: #ff1022;
        font-weight: bold;
        line-height: .32rem;
        margin-top: .3rem;
    }
    .btn_style{
        display: block;
        width: 2.02rem;
        height: .53rem;
        text-align: center;
        color: #fff;
        line-height: .53rem;
        font-size: .36rem;
        border-radius: .1rem;
    }
    .btn_back{
        background-color: #f18d00;
    }
    .btn_confirm{
        background-color: #ff1022;
    }
    .confirm_btn{
        padding: 0 .59rem;
        margin-top: .3rem;
    }
    .t_modal{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba(255,255,255,0);

    }
    .t_modal .modal_inner{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .modal_box{
        width: 4.38rem;
        height: 6.47rem;
        background-color: #ff0000;
        border-radius: .2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -3.23rem;
        margin-left: -2.19rem;
        padding-top: .86rem;
        box-shadow: 0 5px 10px rgba(0,0,0,.14);
    }
    .modal_box .p1{
        font-size: .55rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .62rem;
    }
    .modal_box .p2{
        font-size: .24rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .34rem;
        margin-top: .4rem;
    }
    .modal_box .p3{
        font-size: .24rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .34rem;
        margin-top: .5rem;
    }
    .modal_box .btn_s{
        display: block;
        width: 2.69rem;
        height: .90rem;
        background-color: #fff;
        font-size: .55rem;
        line-height: .7rem;
        padding: .1rem 0;
        border-radius: .2rem;
        margin: .4rem auto 0;
        text-align: center;
        color: #ff0000;
        font-weight: bold;
        box-shadow: 0 5px 10px rgba(0,0,0,.14);
    }
</style>
